<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>忘记密码</title>
<link type="text/css" href="wtz/css/css.css" rel="stylesheet" />
<script src="wtz/jquery/jquery-2.1.1.js"></script>
<script src="wtz/js/Particleground.js"></script>
<style type="text/css">
 body{height:100%;background:#BAE4C1;overflow:hidden;}
canvas{z-index:-1;position:absolute;}
</style>
<script type="text/javascript">
$(function() {
	  //粒子背景特效
	  $('body').particleground({
	    dotColor: '#5cbdaa',
	    lineColor: '#5cbdaa'
	  });



	  var ok1 = false;
	  var ok2 = false;

	 $("#pwd").keyup(function() {

        var str = $("#pwd").val();
        var ret = /^[a-zA-Z][a-zA-Z0-9]{5,20}$/;
        if(ret.test(str)){
            ok1 = true;
            $('.rotWord1 p').hide();
        }else{
            ok1 = false;
            $('.rotWord1 p').show();
        }
    });

		$("#pwds").keyup(function() {
		       var str1 = $("#pwd").val();
		       var str2 = $("#pwds").val();
		       if(str1!=str2){
		           ok2 = false;
		           $('.rotWord2 p').show();
		       }else{
		           ok2 = true;
		           $('.rotWord2 p').hide();
		       }
		   });


	  $('#submint_btn').click(function(event) {
  		if(ok1 && ok2){
  			$('form').submit();
        }else{

            if(!ok1){
                 $('.rotWord1 p').show();
            }

            if(!ok2){
                 $('.rotWord2 p').show();
            }

        }
	});


});

</script>
</head>

<body>

	<div class="content">
		<div class="web-width">
			<div class="for-liucheng">
				<div class="liulist for-cur"></div>
				<div class="liulist for-cur"></div>
				<div class="liulist for-cur"></div>
				<div class="liulist"></div>
				<div class="liutextbox">
					<div class="liutext for-cur">
						<em>1</em><br />
						<strong>填写账户名</strong>
					</div>
					<div class="liutext for-cur">
						<em>2</em><br />
						<strong>验证身份</strong>
					</div>
					<div class="liutext for-cur">
						<em>3</em><br />
						<strong>设置新密码</strong>
					</div>
					<div class="liutext">
						<em>4</em><br />
						<strong>完成</strong>
					</div>
				</div>
			</div>
			<!--for-liucheng/-->

			<form action="${pageContext.request.contextPath}/pwdManager.action?method=modifyPwd" method="post" class="forget-pwd">

				<dl>
					<dt>邮箱：</dt>
					<dd>
						<input style="background-color:#efff;" type="text" name="email" value="${src_email}"
							readonly />
					</dd>
					<div class="clears"></div>
				</dl>
				<dl>
					<dt>新密码：</dt>
					<dd>
						<input style="background-color:#efff;" type="password" id="pwd" name="password" />
					</dd>
					<div class="clears"></div>
				</dl>
				<dl>
					<dt>确认密码：</dt>
					<dd>
						<input style="background-color:#efff;" type="password" id="pwds" name="repassword" />
					</dd>
					<div class="clears"></div>
				</dl>
				<div class="subtijiao">
					<input type="button" id="submint_btn" value="提交" />
				</div>
			</form>
			<!--forget-pwd/-->
		</div>
		<!--web-width/-->
	</div>


	<!--content/-->
	<div class="massge">
	    <div class="wapper_ex">
	        <div class="rotWord1"><p>密码首位为字母，且由5位以上字母，数字组成！<i></i></p></div>
	    </div>

	    <div class="wapper_ex">
	        <div class="rotWord2"><p>两次输入的密码不一致！<i></i></p></div>
	    </div>
	</div>
</body>
</html>